.progress-mode {
	position: relative;
	margin: 0 auto;
	width: 464px;
	height: 414px;
	.progress-clear {
		background: url('https://img12.360buyimg.com/imagetools/jfs/t1/133130/21/14992/5728/5fa500a2E798c30fd/b98ed5936991505f.png')
			no-repeat;
		background-size: 100% 100%;
		width: 416px;
		height: 195px;
		position: absolute;
		top: -1px;
		left: 24px;
		z-index: 99;
	}
	.circle-shadow {
		background: url('https://img14.360buyimg.com/imagetools/jfs/t1/145338/28/13432/43682/5fa4fed3E469f901f/e07c7d65d90cdfe2.png')
			no-repeat;
		background-size: 100% 100%;
		width: 376px;
		height: 376px;
		position: absolute;
		left: 44px;
		top: 19px;
		z-index: 9;
	}
	.progress-start-icon {
		background: url('https://img13.360buyimg.com/imagetools/jfs/t1/126676/6/16489/665/5f97c0ceE7e2cfbb5/dfb2c9dbc9d03129.png')
			no-repeat;
		background-size: 100% 100%;
		width: 22px;
		height: 22px;
		position: absolute;
		left: 0;
		bottom: 175px;
	}
	.rotate-point {
		background: url('https://img14.360buyimg.com/imagetools/jfs/t1/143808/17/12154/3121/5f97b8c0E68991e7d/64fd5c9c40e0e58e.png')
			no-repeat;
		background-size: 100% 100%;
		width: 192px;
		height: 192px;
		position: absolute;
		top: 110px;
		left: 50%;
		margin-left: -96px;
		z-index: 20;
		.rotate-icon {
			background: url('https://img12.360buyimg.com/imagetools/jfs/t1/129909/25/13859/4833/5f97f167E8dd6aa9e/0d2322aa3fd16a35.png')
				no-repeat;
			background-size: 100% 100%;
			width: 140px;
			height: 140px;
			position: absolute;
			left: 50%;
			top: 50%;
			margin-top: -70px;
			margin-left: -70px;
			transform-origin: 70px 70px;
		}
		.progress-text {
			color: #000;
			font-size: 34px;
			position: absolute;
			width: 100%;
			text-align: center;
			line-height: 200px;
		}
	}
	.mask {
		width: 376px;
		height: 188px;
		overflow: hidden;
		border-radius: 188px 188px 0 0;
		position: absolute;
		top: 21px;
		left: 50%;
		transform: translateX(-50%);
		z-index: 9;
		background-color: rgba($color: #fff, $alpha: 0.2);
	}
	.progress-point-icon {
		position: absolute;
		top: 192px;
		left: 18px;
		z-index: 999;
		transform-origin: 216px 18px;
		width: 0;
		height: 0;
		border-top: 20px solid transparent;
		border-bottom: 18px solid transparent;
		border-left: 32px solid #fff;
	}
	.progress-max-icon {
		position: absolute;
		top: 100px;
		right: 46px;
		z-index: 999;
		transform: rotate(0deg);
		transform-origin: 50% 50%;
		width: 14px;
		height: 14px;
		background: url('https://img11.360buyimg.com/imagetools/jfs/t1/142804/39/12147/366/5f97c7ddE70762b06/cb9a3283d3fbd25c.png')
			no-repeat;
		background-size: 100% 100%;
	}
	.progress-content {
		width: 416px;
		height: 208px;
		border-radius: 208px 208px 0 0;
		overflow: hidden;
		position: absolute;
		top: 0;
		left: 50%;
		margin-left: -208px;
		.progress-red-border {
			width: 100%;
			height: 208px;
			transform-origin: 50% 100%;
			background-color: #ff4c2c;
			border-radius: 208px 208px 0 0;
			position: absolute;
			top: 0;
			left: 0;
		}
		.progress-yellow-border {
			width: 100%;
			height: 208px;
			background-color: #ffc757;
			transform-origin: 50% 100%;
			border-radius: 208px 208px 0 0;
			position: absolute;
			top: 0;
			left: 0;
		}
		.progress-mask {
			width: 376px;
			height: 188px;
			margin: 19px auto;
			overflow: hidden;
			border-radius: 188px 188px 0 0;
			position: absolute;
			top: 2px;
			left: 19px;
			filter: blur(40px);
			z-index: 10;
			.progress-red {
				width: 376px;
				height: 188px;
				transform-origin: 50% 100%;
				background-color: #ff4c2c;
				position: absolute;
				top: 0;
				left: 0;
			}
			.progress-yellow {
				width: 376px;
				height: 188px;
				background-color: #ffc757;
				transform-origin: 50% 100%;
				position: absolute;
				top: 0;
				left: 0;
			}
		}
	}
	.progress-end-max-icon {
		background: url('https://img13.360buyimg.com/imagetools/jfs/t1/142390/23/12264/604/5f97b8c0Ef95b9622/afceec6fccd603bc.png')
			no-repeat;
		background-size: 100% 100%;
		width: 33px;
		height: 45px;
		position: absolute;
		right: 0;
		z-index: 20;
		bottom: 162px;
	}
	.progress-end-min-icon {
		background: url('https://img10.360buyimg.com/imagetools/jfs/t1/133627/23/13827/498/5f97b8c0Eaef9217b/ad9a6ab8596b2761.png')
			no-repeat;
		background-size: 100% 100%;
		width: 22px;
		height: 30px;
		position: absolute;
		right: 0;
		z-index: 20;
		bottom: 172px;
	}
	.bottom-text {
		color: #373737;
		font-size: 24px;
		position: absolute;
		bottom: 100px;
		left: 0;
		width: 100%;
		text-align: center;
		line-height: 26px;
		z-index: 20;
	}
	.bottom-area {
		width: 376px;
		height: 204px;
		position: absolute;
		bottom: 2px;
		left: 50%;
		margin-left: -188px;
	}
	.bottom-yellow {
		background: url('https://img12.360buyimg.com/imagetools/jfs/t1/132639/32/13871/2154/5f97f2d3E1ed385d0/fa181913030bed8a.png')
			no-repeat;
		background-size: 100% 100%;
	}
	.bottom-red {
		background: url('https://img11.360buyimg.com/imagetools/jfs/t1/130331/26/13730/2298/5f97f2d3E27b83351/5e353d4acdc283a6.png')
			no-repeat;
		background-size: 100% 100%;
	}
	.bottom-red-yellow {
		background: url('https://img13.360buyimg.com/imagetools/jfs/t1/154264/36/3701/3381/5f97f2d3E92b55144/e72f04dd7b9222c9.png')
			no-repeat;
		background-size: 100% 100%;
	}
	.split-area {
		width: 376px;
		height: 100px;
		position: absolute;
		left: 50%;
		margin-left: -188px;
		bottom: 106px;
		background-color: transparent;
		.common-slit {
			width: 188px;
			height: 100px;
			filter: blur(5px);
			position: absolute;
			bottom: 14px;
			z-index: 9;
			background-color: transparent;
			opacity: 1;
			z-index: 10;
		}
		.bottom-left-red-slit {
			background-image: linear-gradient(rgba(255, 76, 44, 1), #fff 50%);
			left: 0;
		}
		.bottom-right-yellow-slit {
			background-image: linear-gradient(rgba(255, 199, 87, 1), #fff 50%);
			right: 0;
		}
		.bottom-left-yellow-slit {
			background-image: linear-gradient(rgba(255, 199, 87, 1), #fff 50%);
			left: 0;
		}
		.bottom-right-red-slit {
			background-image: linear-gradient(rgba(255, 76, 44, 1), #fff 50%);
			right: 0;
		}
		.white-mask {
			width: 100%;
			height: 64px;
			position: absolute;
			bottom: -2px;
			left: 2px;
			background: #fff;
			z-index: 19;
		}
	}
}
